<template>
  <div class="exit_wrapper">
    <div class="exit">
      <div class="exit_box">
        <!-- <meta http-equiv="refresh" content="4;URL=/" /> -->
        <h1 class="hello">Hello ThreeCube</h1>
        <h1 class="hello_subtitle">感谢您的参与</h1>
        <h3>
          将于<span>&nbsp;{{ initTime }}&nbsp;</span>秒后返回首页
        </h3>
        <div class="immediately">
          <el-button type="info" plain @click="goHome">点此立即返回</el-button>
        </div>
        <img src="@/assets/img/cube.jpg" alt="" class="img" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      initTime: 4,
      timer: -1
    }
  },
  methods: {
    leftTime() {
      if (this.initTime <= 1) {
        this.goHome()
      } else {
        this.initTime--
      }
    },
    goHome() {
      clearInterval(this.timer)
      this.$router.replace({
        path: '/'
      })
    }
  },
  created() {
    this.timer = setInterval(this.leftTime, 1000)
  }
}
</script>

<style scoped>
.exit_wrapper {
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  position: relative;
}
.exit {
  max-width: 40rem;
  margin: auto;
  min-height: 100vh;
  text-align: center;
}
.exit_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hello {
  margin-bottom: 4rem;
  font-size: 4rem;
}
.hello_subtitle {
  font-size: 2.5rem;
}
h3 {
  margin-top: 4rem;
}
.immediately {
  margin-top: 3rem;
}
.img {
  width: 350px;
  position: absolute;
  right: -25rem;
  bottom: -5rem;
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
